<template>
  <div>
    <div id="daFeiMap" ref="daFeiMap" />
  </div>
</template>
<script>
/*
 *  main.js 全局注册
 *   import echarts from 'echarts'
 *   Vue.prototype.$echarts = echarts
 *   import 'echarts/map/js/china';
 *
 * 使用 this.$echarts.init()
 * */
import echarts from 'echarts'
import 'echarts/map/js/china' // 这个主要执行了 echarts.registerMap('china', " china.json 数据 ");

// 飞机曲线
const planePath =
  'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.' +
  '662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,' +
  '121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,' +
  '241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,' +
  '42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'

export default {
  data() {
    return {
      msg: '涟漪特效动画 effectScatter',
      geoCoordMapChina: {
        // 出发地  -------------------------地区坐标自行找坐标资料
        新疆: [87.36, 43.45],
        北京: [116.413554, 39.911013],
        杭州: [120.161693, 30.280059],
        广东: [113.14, 23.08],
        武汉: [114.305392, 30.593098],
        西安: [108.940174, 34.341568]
      },
      destinationMsg: {
        // 目的地
        name: '北京',
        // value: [116.413554, 39.911013, '']
        value: [116.413554, 39.911013]
      },
      planePath: planePath
    }
  },
  mounted() {
    this.drawMap()
  },
  methods: {
    drawMap() {
      const planePath = this.planePath // fei_tip: 见下面
      // 接口给的数据格式---可以考虑用这种格式
      const seriesData = [
        // todo: 接口数据
        { name: '杭州', value: '' },
        { name: '广东', value: '' },
        { name: '武汉', value: '' },
        { name: '西安', value: '' }
      ]

      const resData = this.convertData(seriesData)

      const myChart = echarts.init(this.$refs.daFeiMap)
      const mapBoxOption = {
        geo: {
          // 地理坐标系
          show: true,
          map: 'china'
        },
        series: [
          {
            // 基本地图
            type: 'map',
            mapType: 'china'
          },
          {
            // fei_tip:线路---航线
            type: 'lines',
            symbolSize: 10,
            effect: {
              // 航线动态
              show: true,
              period: 6,
              trailLength: 0,
              symbol: planePath,
              symbolSize: 15
            },
            lineStyle: {
              color: '#2d9df1', // 航线的颜色

              opacity: 0.6,
              curveness: 0.2 // 弯曲程度
            },
            // data: [
            //   {
            //     "fromName": "杭州",
            //     "toName": "北京",
            //     "coords": [[120.161693, 30.280059], [116.413554, 39.911013, ""]],
            //     "value": [116.413554, 39.911013, ""]
            //   },
            //   {
            //     "fromName": "广东",
            //     "toName": "北京",
            //     "coords": [[113.14, 23.08], [116.413554, 39.911013, ""]],
            //     "value": [116.413554, 39.911013, ""]
            //   },
            //   {
            //     "fromName": "新疆",
            //     "toName": "北京",
            //     "coords": [[87.36, 43.45], [116.413554, 39.911013, ""]],
            //     "value": [116.413554, 39.911013, ""]
            //   }
            // ],
            data: resData.resResult
          },
          {
            // fei_tip: 出发地
            type: 'effectScatter',
            coordinateSystem: 'geo', // fei_tip: 使用地理坐标系
            rippleEffect: {
              // 涟漪特效
              period: 4, // 动画时间，值越小速度越快
              brushType: 'stroke', // 波纹绘制方式 stroke, fill
              scale: 4 // 波纹圆环最大限制，值越大波纹越大
            },
            label: {
              show: true,
              position: 'right', // 显示位置
              offset: [5, -10], // 偏移设置
              formatter: function (params) {
                // 圆环显示文字
                return params.data.name
              },
              fontSize: 13,
              color: '#ff6b81'
            },
            symbol: 'circle',
            symbolSize: function (val) {
              return 6 // 圆环大小
            },
            itemStyle: {
              show: true,
              color: '#90a5dc' // 圆环颜色
            },
            // data: [
            //   {name: '杭州', value: [120.161693, 30.280059, ""]},
            //   {name: '广东', value: [113.14, 23.08, ""]},
            //   {name: '新疆', value: [87.36, 43.45, ""]},
            // ]
            data: resData.resFromResult
          },
          {
            // 目的地样式---北京
            type: 'effectScatter',
            coordinateSystem: 'geo',
            label: {
              show: true,
              position: 'right',
              formatter: '{b}',
              color: '#ff6b81'
            },
            symbolSize: function (val) {
              return 8
            },
            itemStyle: {
              color: '#fe4272'
            },
            data: [
              // {name: "北京", value: [116.413554, 39.911013, ""]},
              this.destinationMsg
            ]
          }
        ]
      }

      myChart.setOption(mapBoxOption)
    },

    /**
     * 数据处理
     * @param resData
     * @returns {{resFromResult: *[], resResult: *[]}}
     *
     *
     * resResult 数据格式
     * [
     *   {
     *     "fromName": "杭州",
     *     "toName": "北京",
     *     "coords": [[120.161693, 30.280059], [116.413554, 39.911013, ""]],
     *     "value": [116.413554, 39.911013, ""]
     *   }
     * ]
     *
     * resFromResult 数据格式
     * [
     *   {
     *     "name": "杭州",
     *     "value": [120.161693, 30.280059]
     *   }
     * ]
     *
     */
    convertData(resData) {
      const resResult = [] // 航线覆盖地址
      const resFromResult = [] // 飞行来源地址

      for (let i = 0; i < resData.length; i++) {
        // 出发地经纬度
        const fromCoord = this.geoCoordMapChina[resData[i].name]
        resResult.push({
          fromName: resData[i].name, // 出发地城市
          toName: this.destinationMsg.name, // 目的地城市
          coords: [fromCoord, this.destinationMsg.value], // [出发地经纬度,目的地经纬度]
          value: this.destinationMsg.value // 目的地经纬度
        })

        resFromResult.push({
          name: resData[i].name,
          value: fromCoord
        })
      }

      return { resResult, resFromResult }
    }
  }
}
</script>

<style scoped>
#daFeiMap {
  width: 500px;
  height: 480px;
}
</style>
